<template>
    <div class="topBar">
        <div class="left"><i class="fa fa-th-list"></i></div>
        <div class="center">
            <i class="fa fa-search"></i>&nbsp;&nbsp;<input type="input" />
        </div>
        <div class="right"><i class="fa fa-shopping-cart"></i></div>
    </div>
</template>

<script>
    export default {
        name: "header",
        data:function(){
            return {

            }
        }
    }
</script>

<style type="text/css">
    .topBar i { font-size: 18px;color: #ffffff;}
    .topBar {position: relative; background: #E02022;height: 50px;}
    .topBar .center { text-align: center;padding-top: 10px;}
    .topBar .center input {border:none;border-radius:30px;padding: 5px 10px;width: 50%}
    .topBar .center input:focus {border: none;outline: none;}
    .topBar .left {position: absolute;top:16px;left: 14px;}
    .topBar .right {position: absolute;right:16px;top:14px;}
</style>